
#stripe {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 50;
	box-shadow: 0 0 2px black;
	background: $pad-background;
	&.open {
		box-shadow: 0 0 12px black;
	}
}
#stripe-top {
	@include flexbox(row);
	min-height: 40px;
}

#non-top {
	opacity: 1;
	&.behind {
		opacity: $opacity-behind-open-top;
		transition: opacity .4s;
	}
}

#M-menu {
	position: fixed;
	top: 0;
	z-index: 70;
	color: $menu-item-color;
	a.menu-item {
		color: $menu-item-color;
		text-decoration: none;
		display: block;
		padding: 10px;
		cursor: pointer;		
		&:hover {
			background: $menu-item-hover-bg;
		}
	}
	&.open {
		width: 260px;
		box-shadow: 0 0 2px black;
		background: $menu-background;
	}
}
#Miaou-logo-wrapper {
	position: relative;
	display: block;
	height: 40px;
	width: 38px;
	overflow: hidden;
}
#Miaou-logo-wrapper:after { // to make the link clickable, as events don't bubble out of the svg document
	content: ""; 
	position: absolute; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0;
}
#M-menu:hover #Miaou-logo-wrapper {
	width: 200px;
	transition: width 1.5s .2s;
}
#Miaou-logo {
	height: 40px;
	padding-left: 2px;
}
#menu-content {
	display: none;
}
#M-menu.open #menu-content {
	display: block;
}
#menu-settings::before {
	font-family: "fontello";
	content: "\e828 ";
	margin-right: 5px;
}
#menu-logout::before {
	font-family: "fontello";
	content: "\e829 ";
	margin-right: 5px;
}
#menu-help::before {
	font-family: "fontello";
	content: "\e810 ";
	margin-right: 5px;
}
#menu-home::before {
	font-family: "fontello";
	content: "\e812 ";
	margin-right: 5px;
}

#room-panel-wrapper {
	margin-left: 40px;
	position: relative;
	flex: 0 1 430px;
}
#room-panel-bg, #room-panel {
	position:absolute;
	top:0; left:0; right:0;bottom:0;
}
#room-panel-bg {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: 0.6;
}
#room-panel {
	@include flexbox(row, center);
	//~ height: 40px;
	padding: 0 4px;
	button {
		opacity: 0;
		transition: opacity 1s;
	}
	//~ position: relative;
}
#room-panel:hover button {
	opacity: 1;
	transition: opacity .5s;
	z-index: 2;
}
#room-title {
	@include flex(1 0);
	#roomname {
		color: $roomname-color;
		text-decoration: none;
		text-shadow: $roomname-text-shadow;
		font-size:115%;
	}
}

#rooms-panel {
	@include flexbox(row, stretch);
	&.closed {
		height: 0;
		transition: height .5s;	
	}
	&.open {
		height: 67vh;
		transition: height .5s;	
	}
}
#rooms {
	@include flexbox(row, stretch);
	max-width: 1200px;
}
#rooms-spinner, #rooms-content {
	@include flex(1 0);
}
#rooms-spinner {
	@include flexbox(row, center, center);
}
#rooms-content {
	@include flexbox(column, stretch);
	padding: 5px;
}

#rooms-tabs {
	@include flexbox(row);
	@include flex(0 0 34px);
	.tab {
		text-align: center;
		padding: 5px 10px;
		border-style:solid;
		border-color:  $chat-tabs-border-color;
		border-width: 0 0 $chat-tabs-border-width 0;
		color: $unselected-room-tab-color;
		cursor: pointer;
		background-image: $chat-tabs-unselected-bg-image;
		&:hover {
			color: $hovered-room-tab-color;
		}
		&.selected {
			color: $selected-room-tab-color;
			background-image: $chat-tabs-selected-bg-image;
			background-color: $room-tab-bg-color;
			border-width: $chat-tabs-border-width $chat-tabs-border-width 0 $chat-tabs-border-width;	
		}
	}
	.aftertabs {
		@include flex(1 0);
	}
}
#rooms-page {
	@include flex(1 1);
	border-style:solid;
	border-color: $chat-tabs-border-color;
	border-width: 0 $chat-tabs-border-width $chat-tabs-border-width $chat-tabs-border-width;	
	background-color: $room-tab-bg-color;
	padding: 5px;
	overflow-y: auto;
	@include flexbox(row);
	min-width: 1000px;
	.rooms-list {
		flex: 0 1 800px;
		.room {
			@include flexbox(row);
			position: relative;
			margin: 1px 0;
			&:hover {
				background: $pad-room-hover-bg;
				transition: background .5s;
			}
			.room-left {
				@include flex(1 0);
				a.room-title {
					color: inherit;
					margin: 4px 0;
					display: block;
				}
				.room-desc {
					margin-left: 20px;
					background: $pad-room-desc-bg;
					padding: 4px;
					min-height: 40px;
					overflow: hidden;
				}			
			}
			.room-right {
				@include flex(0 0 80px);
				visibility: hidden;
				padding: 4px;
				@include flexbox(column, center, center);
				span {
					margin: 8px 0;
					text-align: center;				
				}
				.lastcreated {
					font-size: 0.7em;
				}
			}
			.last-message {
				display: none;
				position: absolute;
				left: 0;
				right: 0;
				background: $pad-room-last-message-bg;
				z-index: 55;
				padding: 8px;
				font-size: .9em;
				border-top: $pad-room-last-message-border-top;
			}
		}
		.room:hover .room-right {
			visibility: visible;
		}
	}
}

#non-top {
	#left, #right, #center {
		top: 40px;
	}
	#left, #right {
		padding-top: 15px;
	}
}
#right #room-description {
	max-height: 60px;
	overflow-y: hidden;
	margin-bottom: 10px;
	position: relative;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,1)), color-stop(0.6, rgba(0,0,0,1)), color-stop(0.8, rgba(0,0,0,.8)), color-stop(1, rgba(0,0,0,0)));
}
#right #room-description:hover {
	max-height: none;
	-webkit-mask-image: none;
	transition: max-height .3s; // doesn't work
}
